<template>
  <!-- top -->
  <NEl class="top-com pt-3 pb-3 pl-5 pr-5">
    <!-- tabs -->
    <div class="ml-2 top-l-box">
      <NButton size="large" text @click="router.push('/message')">
        <span>&lt;</span> 回到首页
      </NButton>
    </div>

    <!-- search -->
    <div>
      <!-- <NSpin v-if="loading"></NSpin> -->
    </div>

    <!-- user -->
    <div class="top-d-box" v-if="islogin">
      <!-- userinfo -->
      <div>
        <NButton text size="large">我要发贴</NButton>
      </div>

      <div>
        <NButton text size="large">个人首页</NButton>
      </div>

      <div>
        <WuUserInfo></WuUserInfo>
      </div>
    </div>

    <!-- user: 未登录状态 -->
    <div class="top-d-box" v-else>
      <div>
        <NPopover>
          <template #trigger>
            <NButton disabled text size="large">我要发贴</NButton>
          </template>
          <span>请先登录</span>
        </NPopover>
      </div>

      <div>
        <NPopover>
          <template #trigger>
            <NButton disabled text size="large">个人中心</NButton>
          </template>
          <span>请先登录</span>
        </NPopover>
      </div>

      <div>
        <WuUserInfo></WuUserInfo>
      </div>
    </div>
  </NEl>

  <!-- body -->
  <div>
    <div v-if="messageInfo.mid">
      <!-- 骨架屏 -->
      <div class="skeleton-box" v-if="loading">
        <div>
          <NSkeleton height="3rem" width="10rem" :sharp="false"></NSkeleton>
        </div>
        <div>
          <div><NSkeleton height="1.6rem" width="5rem" :sharp="false"></NSkeleton></div>
          <div><NSkeleton height="1.6rem" width="5rem" :sharp="false"></NSkeleton></div>
          <div><NSkeleton height="1.6rem" width="5rem" :sharp="false"></NSkeleton></div>
          <div><NSkeleton height="1.6rem" width="5rem" :sharp="false"></NSkeleton></div>
        </div>
        <div>
          <div><NSkeleton width="3rem" circle></NSkeleton></div>
          <div><NSkeleton height="2rem" width="5rem" :sharp="false"></NSkeleton></div>
        </div>
        <div>
          <NSkeleton height="6rem"></NSkeleton>
        </div>
      </div>

      <!-- info -->
      <div class="message-box" v-else>
        <!-- 1 -->
        <div>{{ messageInfo.title }}</div>
        <!-- 2 -->
        <div>
          <div>{{ Tools.formatDate(messageInfo.lastupdate) }}</div>
          <div>{{ messageInfo.hits }}人看过</div>
          <div>{{ messageInfo.praise }}人赞过</div>
          <div>{{ messageInfo.reply }}人参与</div>
        </div>
        <!-- 3 -->
        <div>
          <!-- 用户信息 -->
          <div>
            <div>
              <NAvatar size="large" round :src="Api.userlogo(messageInfo.uid)"></NAvatar>
            </div>
            <div>
              {{ messageInfo.user.info.nickname || messageInfo.user.user.username }}
            </div>
          </div>

          <!-- 内容 -->
          <div v-html="messageInfo.info"></div>
        </div>
        <!-- 4 -->
        <div>
          <div @click="showMrvisible">举报</div>
          <div :class="{ active: messageInfo.exInfo.praised }" @click="likeMessage(messageInfo)">
            牛逼
          </div>
        </div>
      </div>
    </div>

    <!-- 举报帖子 -->
    <div>
      <NModal v-model:show="mrvisible" title="举报帖子" preset="dialog" type="error">
        <div>
          <NInput
            v-model:value="mReportInfo.info"
            placeholder="请输入举报原因"
            type="textarea"
            rows="8"
            clearable
          ></NInput>
        </div>
        <template #action>
          <NButton @click="reportMessage" :loading="mrLoading" type="error">确定</NButton>
        </template>
      </NModal>
    </div>

    <NDivider></NDivider>

    <!-- 评论区 -->
    <div class="reply-box">
      <!-- r-top -->
      <div class="r-top">
        <div>
          <NTabs @update-value="changeOrder" size="large">
            <NTabPane name="1" tab="时间"></NTabPane>
            <NTabPane name="2" tab="高赞"></NTabPane>
          </NTabs>
        </div>
        <div>
          <NButton tertiary size="small" type="primary" @click="showPvisible">发布评论</NButton>
        </div>
      </div>

      <!-- 评论 -->
      <div v-for="r in replyInfo" :key="r.mrid" class="r-info">
        <!-- 1 -->
        <div>
          <NAvatar round :src="Api.userlogo(r.uid)"></NAvatar>
        </div>
        <!-- 2 -->
        <div>
          <!-- 2.1 -->
          <div>
            {{ r.user.info.nickname || r.user.user.username }}
          </div>
          <!-- 2.2 -->
          <div>
            {{ r.info }}
          </div>
          <!-- 2.3 -->
          <div>
            <div>
              {{ Tools.formatDate(r.lastupdate, 'yyyy-MM-dd') }}
            </div>
            <div>
              <div class="mr-3" @click="showRRVisible(r)">举报</div>
              <div v-if="r.exInfo.mine" class="mr-3" @click="delReply(r)">删帖</div>
              <div :class="{ active: r.exInfo.praised }" @click="likeReply(r)">
                顶 {{ r.praise }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 举报评论 -->
      <div>
        <NModal v-model:show="rrVisible" title="举报评论" preset="dialog" type="error">
          <div>
            {{ rrInfo }}
            <NInput
              v-model:value="rrInfo.info"
              placeholder="请输入举报原因"
              type="textarea"
              rows="8"
              clearable
            ></NInput>
          </div>
          <template #action>
            <NButton @click="reportReply" :loading="rrLoading" type="error">确定</NButton>
          </template>
        </NModal>
      </div>

      <!-- 评论框 -->
      <div>
        <NModal v-model:show="pvisible" title="发布评论" preset="dialog">
          <div>
            <NInput
              v-model:value="pReplyInfo"
              placeholder="请输入评论内容"
              type="textarea"
              rows="8"
              clearable
            ></NInput>
          </div>
          <template #action>
            <NButton @click="publishReply" :loading="pLoading">发布</NButton>
          </template>
        </NModal>
      </div>
    </div>

    <!-- loading样式 -->
    <div v-if="replyLoading" class="tc p-4">
      <NSpin> <template #description> 莫慌莫慌，马上出来 </template> </NSpin>
    </div>
    <!-- 无数据 -->
    <div class="tc p-4" v-if="page.pageNumber >= page.pageCount && !replyLoading">暂无更多评论</div>
  </div>

  <div class="page">
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="queryReply"
      ></NPagination>
    </NFlex>
  </div>
</template>

<script setup lang="ts">
import {
  NAvatar,
  NButton,
  NDivider,
  NSpin,
  useMessage,
  NEl,
  NTabs,
  NTabPane,
  NModal,
  NInput,
  useDialog,
  NSkeleton,
  NFlex,
  NPagination,
} from 'naive-ui'
const message = useMessage()
const dialog = useDialog()

import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore'
const { islogin } = storeToRefs(useUserStore())

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

import WuUserInfo from '@/components/WuUserInfo.vue'
import type { TbMessage, TbMessageReply, TbMessageReplyReport } from '@/types/Message'
import { Api } from '@/types/Api'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import { Tools } from '@/types/Tools'

const loading = ref(false)
const mid = route.params.mid

//#region 数据
const messageInfo = ref({} as TbMessage)

const queryMessage = () => {
  loading.value = true
  Api.get(`/message/${mid}`, {}, (data: BaseDataResult<TbMessage>) => {
    loading.value = false
    if (data.success) {
      messageInfo.value = data.data
      queryReply()
      return
    }
    message.error(data.message)
  })
}

onMounted(() => {
  queryMessage()
})

// 查询评论
const replyLoading = ref(false)
const replyInfo = ref([] as Array<TbMessageReply>)
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const order = ref(1)
const changeOrder = (tabsOrder: number) => {
  order.value = tabsOrder
  requeryReply()
}

const queryReply = () => {
  replyLoading.value = true
  Api.get(
    `/message/reply/${mid}/${page.value.pageSize}/${page.value.pageNumber}/${order.value}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReply>>) => {
      replyLoading.value = false
      if (data.success) {
        replyInfo.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const requeryReply = () => {
  page.value.pageNumber = 1
  queryReply()
}

//#endregion

//#region 点赞
// 点赞帖子内容
const likeMessage = (info: TbMessage) => {
  Api.post(`/message/praise/${info.mid}`, {}, (data: BaseDataResult<number>) => {
    if (data.success) {
      info.exInfo.praised = !info.exInfo.praised
      return
    }
    message.error(data.message)
  })
}

// 点赞评论
const likeReply = (info: TbMessageReply) => {
  Api.post(`/reply/praise/${info.mrid}`, {}, (data: BaseDataResult<number>) => {
    if (data.success) {
      info.exInfo.praised = !info.exInfo.praised
      return
    }
    message.error(data.message)
  })
}

//#endregion

//#region 评论功能
const pLoading = ref(false)
const pvisible = ref(false)
const showPvisible = () => {
  pvisible.value = true
  pReplyInfo.value = ''
}

const pReplyInfo = ref('')
const publishReply = () => {
  pLoading.value = true
  Api.post('/reply', { mid: mid, info: pReplyInfo.value }, (data: BaseResult) => {
    pLoading.value = false
    if (data.success) {
      requeryReply()
      pvisible.value = false
      return
    }
    message.error(data.message)
  })
}

//删除评论
const delReply = (info: TbMessageReply) => {
  dialog.error({
    title: '警告',
    content: `确定删除这条评论吗？`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      Api.delete(`/reply/${info.mrid}`, {}, (data: BaseResult) => {
        if (data.success) {
          message.success('删除成功')
          requeryReply()
          return
        }
        message.error(data.message)
      })
    },
  })
}

//#endregion

//#region 举报
const mrLoading = ref(false)
const mrvisible = ref(false)
const mReportInfo = ref({ mid: -1, info: '' } as TbMessageReply)
const showMrvisible = () => {
  mReportInfo.value.info = ''
  mrvisible.value = true
}

const reportMessage = () => {
  mrLoading.value = true
  Api.post('/report/message', { mid: mid, info: mReportInfo.value.info }, (data: BaseResult) => {
    mrLoading.value = false
    if (data.success) {
      mrvisible.value = false
      message.success('举报成功')
      return
    }
    message.error(data.message)
  })
}

const rrLoading = ref(false)
const rrVisible = ref(false)
const rrInfo = ref({ mrid: -1, info: '' } as TbMessageReplyReport)

const showRRVisible = (info: TbMessageReply) => {
  rrInfo.value.mrid = info.mrid
  rrInfo.value.info = ''
  rrVisible.value = true
}

const reportReply = () => {
  rrLoading.value = true
  Api.post('/report/reply', rrInfo.value, (data: BaseResult) => {
    rrLoading.value = false
    if (data.success) {
      rrVisible.value = false
      message.success('举报成功')
      return
    }
    message.error(data.message)
  })
}

//#endregion
</script>

<style scoped lang="scss">
.top-d-box {
  display: flex;
  align-items: center;
  > div {
    margin: 0 10px;
  }
}

.top-l-box {
  span {
    margin-right: 10px;
  }
}

.skeleton-box {
  width: 61.8vw;
  margin: 0 auto;
  > div:nth-of-type(2) {
    margin: 1rem 0;
    display: flex;
    > div {
      margin-right: 1rem;
    }
  }
  > div:nth-of-type(3) {
    display: flex;
    align-items: center;
    > div:last-of-type {
      // width: 4rem;
      margin-left: 1rem;
    }
  }
  > div:nth-of-type(4) {
    margin-top: 1rem;
    // height: 3rem;
  }
}

// 帖子的东西
.message-box {
  width: 61.8vw;
  margin: 0 auto;
  // 标题
  > div:nth-of-type(1) {
    font-size: 1.5rem;
  }
  // 帖子信息
  > div:nth-of-type(2) {
    display: flex;
    color: #999;
    font-size: 0.8rem;
    margin: 1rem 0;
    > div {
      margin-right: 1rem;
    }
  }
  // 内容
  > div:nth-of-type(3) {
    margin-top: 3rem;
    // 用户信息
    > div:first-of-type {
      display: flex;
      align-items: center;
      div {
        margin-right: 1rem;
        font-size: 1.2rem;
      }
    }
    // 内容
    > div:last-of-type {
      border: #999 1px solid;
      border-radius: 5px;
      padding: 1rem;
      margin-top: 1rem;
    }
    :deep(p) {
      font-size: 1rem;
      margin: 1rem 0;
    }
    :deep(img) {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 5px;
    }
  }
  > div:nth-of-type(4) {
    display: flex;
    margin-top: 1rem;
    justify-content: end;
    color: #999;
    cursor: pointer;
    > div {
      margin-left: 1rem;
      &:hover {
        color: #dcdcdc;
      }
    }
  }
  .active {
    color: #ff0000 !important;
  }
}

// 评论区
.reply-box {
  width: 61.8vw;
  margin: 0 auto;
  // tabs和发布按钮
  .r-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  // 评论card
  .r-info {
    margin-top: 1rem;
    display: flex;
    // 右
    > div:last-of-type {
      width: 100%;
      margin-left: 1rem;
      > div:first-of-type {
        font-size: 1rem;
      }
      > div:nth-of-type(2) {
        font-size: 1.2rem;
        margin: 0.5rem 0;
      }
      // 底部：日期，赞，举报...
      > div:last-of-type {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.8rem;
        color: #999;
        // 底部右边
        > div:last-of-type {
          display: flex;
          cursor: pointer;
        }
      }
      .active {
        color: #ff0000 !important;
      }
    }
  }
}
</style>
